<template>
    <el-upload
        ref="upload"
        :data="data"
        :auto-upload="autoUpload"
        :multiple="multiple"
        :on-change="(file, fileList)=>{this.fileList = fileList}"
        :on-success="onSuccess"
        :before-upload="beforeUpload"
        :on-error="onError"
        :on-exceed="handleExceed"
        :limit="limit"
        :accept="accept"
        :action="action"
    >
        <el-button slot="trigger" size="small">{{$t('label.selectFile')}}</el-button>
        <div slot="tip" class="el-upload__tip">{{$t(tip)}}</div>
    </el-upload>
</template>
<script>
import UTILS from "common/src/utils/utils";
/**
 * 上传组件
 */
export default {
    name: "EduUpload",
    props: {
        autoUpload: {
            default: false
        },
        multiple: {
            default: false
        },
        limit: {
            default: 1
        },
        accept: {
            default: "'application/vnd.ms-excel'"
        },
        action: {
            default: ""
        },
        data: {
            type: Object,
            default: null
        },
        tip: {
            default: "courseTake.uploadXLSFileOnly"
        },
        type: {
            default: ["image/jpeg", "image/png", "image/jpg"],
            type: Array
        },
        size: {
            default: 1,
            type: Number
        }
    },
    data() {
        return {
            fileList: []
        };
    },
    mounted() {},
    created() {},
    methods: {
        beforeUpload(file) {
            if (this.type.indexOf("xls") > -1) {
                let suffixArr = file.name.split(".");
                let suffix = suffixArr[suffixArr.length - 1];
                if (suffix != "xls" && suffix != "xlsx") {
                    this.$message({
                        type: "warning",
                        message: `上传文件格式不是xls或者xlsx，请确认后再进行上传`
                    });
                    return false;
                }
            } else if (this.type.indexOf(file.type) == -1) {
                this.$message({
                    type: "warning",
                    message: `上传图片格式不正确，只支持${this.type.join(
                        ","
                    )}格式的图片上传`
                });
                return false;
            }
            if (parseFloat(this.size) < file.size / 1024 / 1024) {
                this.$message({
                    type: "warning",
                    message: `上传图片不能大于${this.size}M`
                });
                return false;
            }
        },
        clearFiles() {
            this.$refs.upload.clearFiles();
            this.fileList = [];
        },
        isEmpty() {
            return _.isEmpty(this.fileList);
        },
        submit() {
            this.$refs.upload.submit();
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制上传文件数量为${this.limit}`);
        },
        onSuccess(res, file, fileList) {
            if (res.code != 200 && res.msg) {
                this.clearFiles();
                this.$alert(res.msg, this.$t("message.prompt"), {
                    type: "warning"
                });
            } else {
                this.$emit("on-success", res, file, fileList);
            }
        },
        onError(err, file, fileList) {
            this.$emit("on-error", res, file, fileList);
        }
    }
};
</script>

<style lang="scss">
</style>
